<template>
  <section class="main">
    <a-card style="margin-top: 24px" :bordered="false" title="营养素">
      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="date"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          :scroll="{ x: true }"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="nutrientRecordPhoto" slot-scope="text, record">
            <div
              style="display: flex; justify-content: space-around; flex-wrap: wrap;"
              v-if="record.nutrientRecordPhoto"
            >
              <div
                v-for="(photo, index) in record.nutrientRecordPhoto.split(',')"
                :key="index"
                style="
                  position: relative;
                  padding: 8px;
                  border: 1px solid #d9d9d9;
                  border-radius: 4px;
                "
              >
                <img style="width: 80px; height: 80px;" :src="photo" :preview="record.nutrientRecordPhoto.split(',')" />
              </div>
            </div>
            <div v-else></div>
          </template>
          <template slot="nutrientRecordDescribe" slot-scope="text, record">
            <p style="width:95%">{{ record.nutrientRecordDescribe }}</p>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <nutrients-modal ref="modalForm" @ok="modalFormOk"></nutrients-modal>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import LineCharts from '@/views/bloodProfile/components/LineChart'
import { postAction, getAction } from '@/api/manage'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import NutrientsModal from './modules/NutrientsModal'
import { filterObj } from '@/utils/util'

const listColumns = [
  {
    title: '日期',
    align: 'center',
    dataIndex: 'recordDate',
    width: 200
  },
  {
    title: '记录项目',
    align: 'center',
    dataIndex: 'nutrientRecordType',
    width: 200
  },
  {
    title: '图片',
    align: 'center',
    dataIndex: 'nutrientRecordPhoto',
    scopedSlots: { customRender: 'nutrientRecordPhoto' },
    width: 200
  },
  {
    title: '营养素情况',
    align: 'center',
    dataIndex: 'nutrientRecordDescribe',
    scopedSlots: { customRender: 'nutrientRecordDescribe' }
  }
]
export default {
  name: 'Nutrients',
  mixins: [BloodProfileMixin],
  components: { NutrientsModal },
  data() {
    return {
      initCharts: 'init',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns,
      ipagination: {
        current: 1,
        pageSize: 10,
        // pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        // 按日期分组获取患者尿酮记录
        getList: '/101/12/1011202'
      }
    }
  },
  methods: {
    getQueryParams() {
      //获取查询条件
      var param = this.queryParam
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getList() {
      if (this.url.getList) {
        this.listDataSource = []
        this.listDataLoading = true
        var params = this.getQueryParams() //查询条件
        postAction(this.url.getList, params).then(res => {
          if (res.success) {
            console.log('getList:', res)
            res.result.recordList.forEach(v => {
              if (v.nutrientRecordMorning) {
                this.listDataSource.push({
                  recordDate: v.nutrientRecordMorning.recordDate,
                  nutrientRecordType: '营养素（早）',
                  nutrientRecordPhoto: v.nutrientRecordMorning.nutrientRecordPhoto,
                  nutrientRecordDescribe: v.nutrientRecordMorning.nutrientRecordDescribe
                })
              }
              if (v.nutrientRecordNoon) {
                this.listDataSource.push({
                  recordDate: v.nutrientRecordNoon.recordDate,
                  nutrientRecordType: '营养素（午）',
                  nutrientRecordPhoto: v.nutrientRecordNoon.nutrientRecordPhoto,
                  nutrientRecordDescribe: v.nutrientRecordNoon.nutrientRecordDescribe
                })
              }
              if (v.nutrientRecordNight) {
                this.listDataSource.push({
                  recordDate: v.nutrientRecordNight.recordDate,
                  nutrientRecordType: '营养素（晚）',
                  nutrientRecordPhoto: v.nutrientRecordNight.nutrientRecordPhoto,
                  nutrientRecordDescribe: v.nutrientRecordNight.nutrientRecordDescribe
                })
              }
              if (v.nutrientRecordBeforeSleep) {
                this.listDataSource.push({
                  recordDate: v.nutrientRecordBeforeSleep.recordDate,
                  nutrientRecordType: '营养素（睡前）',
                  nutrientRecordPhoto: v.nutrientRecordBeforeSleep.nutrientRecordPhoto,
                  nutrientRecordDescribe: v.nutrientRecordBeforeSleep.nutrientRecordDescribe
                })
              }
            })
            if (res.result.count) {
              this.ipagination.total = res.result.count
            } else {
              this.ipagination.total = 0
            }
            this.ipagination.pageSizeOptions = []
            this.ipagination.total = this.ipagination.total * (this.listDataSource.length / 10).toFixed()
            this.ipagination.pageSize = this.listDataSource.length
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.listDataLoading = false
        })
      }
    },
    handleTableChange(pagination) {
      this.ipagination = pagination
      this.ipagination.pageSize = 10
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
</style>

